<template>
    <div>
        我是首页
        <div>
            <div>
                <div class="testStyle">
                    <span class="title">测试title</span>
                </div>
                <el-button type="primary" @click="add">添加数据</el-button>
                <el-button type="primary" @click="findAll">查询数据</el-button>
                <el-button type="primary" @click="addOne">页码+1</el-button>
                <div style="width: 95%; height: 170px; border: 1px solid">
                    <Echart :options="echartObj" :autoResize="true" style="width: 100%; height: 100%"/>
                </div>
            </div>
            <div>
                <ul>
                    <li v-for="(item,index) in dataList" :key="index" @click="getDetail(item._id)">{{item._id}}</li>
                </ul>
            </div>


        </div>
    </div>
</template>

<script>
    import echart from "vue-echarts";
    import {testCfc,testCpr,testAdd,testfindAll,testquery} from "@/api";

    export default {
        name: "index",
        data() {
            return {
                menuArr: [
                    { id: '001', name: '今日计划' },
                    { id: '002', name: '今日计划' },
                    { id: '003', name: '今日计划' },
                    { id: '004', name: '今日计划' },
                ],
                echartObj: {},
                dataList:[],
                page:1,
                pageSize: 10,
                total:0,
                value: '', // 获取的markdow文档内容
            }
        },
        mounted() {
            this.go();
            this.loadEcharts();
        },
        methods:{
            go(){
                testCfc().then(res=>{
                    //console.log("云函数请求结果："+JSON.stringify(res.data))
                });
                testCpr().then(res=>{
                    //console.log("云工程请求结果："+JSON.stringify(res.data))
                })
            },
            loadEcharts() {
                const XData = [
                    "2019-07-01 00:00:00",
                    "2019-07-01 00:01:00",
                    "2019-07-01 00:02:00",
                    "2019-07-01 00:03:00",
                    "2019-07-01 00:04:00",
                    "2019-07-01 00:05:00",
                    "2019-07-01 00:06:00",
                    "2019-07-01 00:07:00",
                    "2019-07-01 00:08:00",
                    "2019-07-01 00:09:00",
                    "2019-07-01 00:10:00",
                    "2019-07-01 00:11:00",
                    "2019-07-01 00:12:00",
                    "2019-07-01 00:13:00",
                    "2019-07-01 00:14:00",
                    "2019-07-01 00:15:00",
                    "2019-07-01 00:16:00",
                    "2019-07-01 00:17:00",
                    "2019-07-01 00:18:00",
                    "2019-07-01 00:19:00",
                    "2019-07-01 00:20:00",
                    "2019-07-01 00:21:00",
                    "2019-07-01 00:22:00",
                    "2019-07-01 00:23:00",
                ];
                const YData = [
                    "1.3",
                    "1.2",
                    "1.0",
                    "1.1",
                    "1.3",
                    "0.8",
                    "0.9",
                    "0.9",
                    "1.3",
                    "1.3",
                    "1.2",
                    "1.0",
                    "1.1",
                    "1.3",
                    "0.8",
                    "0.9",
                    "0.9",
                    "1.3",
                    "1.1",
                    "1.3",
                    "0.8",
                    "0.9",
                    "0.9",
                    "1.3",
                ];
                this.echartObj = {
                    tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                        backgroundColor: "#6a7985",
                        },
                    },
                    },
                    grid: {
                        top: "6%",
                        left: "6%",
                        right: "6%",
                        bottom: "3%",
                        containLabel: true,
                    },
                    xAxis: {
                    type: "category",
                    data: XData,
                    axisLabel: {
                        // 坐标轴刻度标签的相关设置。
                        formatter(params) {
                        let newParamsName = ""; // 最终拼接成的字符串
                        const paramsNameNumber = params.length; // 实际标签的个数
                        const provideNumber = 10; // 每行能显示的字的个数
                        const rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                        /**
                         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                         */
                        // 条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                            /** 循环每一行,p表示行 */
                            // eslint-disable-next-line no-plusplus
                            for (let p = 0; p < rowNumber; p++) {
                            let tempStr = ""; // 表示每一次截取的字符串
                            const start = p * provideNumber; // 开始截取的位置
                            const end = start + provideNumber; // 结束截取的位置
                            // 此处特殊处理最后一行的索引值
                            if (p === rowNumber - 1) {
                                // 最后一次不换行
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                // 每一次拼接字符串并换行
                                tempStr = `${params.substring(start, end)}\n`;
                            }
                            newParamsName += tempStr; // 最终拼成的字符串
                            }
                        } else {
                            // 将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        // 将最终的字符串返回
                        return newParamsName;
                        },
                    },
                    },
                    yAxis: {
                    type: "value",
                    },
                    series: [
                    {
                        data: YData,
                        type: "line",
                        smooth: true, // true: 折线变成曲线
                        itemStyle: { normal: { color: "#47a6ff" } },
                        areaStyle: {
                        normal: {
                            color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                            // 这里用到了echart
                            {
                                offset: 0,
                                color: "#47a6ff",
                            },
                            {
                                offset: 1,
                                color: "#fff",
                            },
                            ]),
                        },
                        },
                    },
                    ],
                };
            },

            //插入数据
            add(){
                let obj={
                    name:"lxuanyang",
                    age:"24",
                    email:"test@163.com"
                }
                testAdd(obj).then(res=>{
                    if (res.data.code===200){
                        this.$message.success(res.data.msg)
                    }
                })
            },

            //分页查询所有数据
            findAll(){
                let obj={
                    page:this.page,
                    pageSize:this.pageSize
                }
                testfindAll(obj).then(res=>{

                    if (res.data.code===200){
                        this.dataList=res.data.data;
                        this.total=res.data.total;
                    }
                })
            },

            //根据id查询详情信息
            getDetail(id){
                let obj={
                    _id:Object(id),

                }

                testquery(obj).then(res=>{
                    if (res.data.code===200){
                        this.$message.success(res.data.data)
                    }
                })

            },

            //页码+1
            addOne(){
                this.page++;
                //向上取整  计算总页数
                let totalPges=Math.ceil(this.total/this.pageSize);
                if (this.page>totalPges){
                    this.$message.warning("总页数是："+totalPges+"；当前页是："+this.page+"；当前页大于总页数查询不到数据")
                }else{
                    this.findAll()
                }


            }

        }
    }
</script>

<style lang="scss" scoped>
// 注释
.testStyle{
    margin:20px 0;
    background-color: #48b5e8;
    width: 100px;
    height: 40px;
    line-height: 20px;

    .title{

        font-size: 20px;
        color: white;
    }
    .title::before{
        display: inline-block;
        content: "";
        height: 100%;
        vertical-align: middle;
    }
}
</style>